<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status0.4875remstyle" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<meta content="maximum-dpr=1" name="flexible" />
<title>我的订单</title>
<%@ include file="/include/wx_main_include.jsp"%>
<link rel="stylesheet" type="text/css" href="${path}/static/myjs/information/weixin/css/base.css?v=${css_version}">
<link href="${path}/static/myjs/information/weixin/css/mui.min.css?v=${css_version}" rel="stylesheet" />
<link href="${path}/static/myjs/information/weixin/css/mui-order.css?v=${css_version}" rel="stylesheet">
<link rel="stylesheet" href="${path}/static/myjs/information/weixin/css/new_file.css?v=${css_version}" />
<link rel="stylesheet" type="text/css" href="${path}/static/myjs/information/weixin/css/iconfont.css?v=${css_version}">
<script type='text/javascript' src='${path}/static/common/plugins/vue.min.js'></script>
<style type="text/css">
.mui-pull-bottom-tips {
	text-align: center;
	font-size: 15px;
	line-height: 40px;
	color: #777;
	font-weight: 700;
}
</style>
</head>
<body id="order-list">
	<div id="view">
		<div id="top-fixed">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">订单</h1>
			</header>
		</div>
		<div class="scroll-wrap order-list-main">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group" style="height: 100%;">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
							<div class="mui-scroll" id="orderContent">
								<ul class="mui-table-view mui-table-view-chevron" v-cloak>
									<li class="mui-table-view-cell" v-for="item in orderList" v-if="item.STATUS!='DELETED'">
										<a class="mui-navigate-right" href="#">
												<em class="mui-pull-left"  >{{item.businessName}}</em>
											<span class="mui-pull-right order-iconred" v-text v-if="item.orderStatus===1">已支付</span>
											<span class="mui-pull-right order-iconred" v-text v-if="item.orderStatus===0">未支付</span>
											<span class="mui-pull-right order-iconred" v-text v-if="item.orderStatus===2">已配送</span>
											<span class="mui-pull-right order-iconred" v-text v-if="item.orderStatus===3">已完成</span>
										</a>

										<div class="mui-collapse-content">
											<div class="order-content-list">
												<dl>
													<div v-for="food in item.children" class="overflow-h">
														<dt class="order-listdetailed mr-tt" v-text="food.name"></dt>
														<dd class="order-listdetailed color-gray">×</dd>
														<dd class="order-listdetailed color-gray" v-text="food.quantity"></dd>
														<!-- <dd  class="order-listdetailed" v-text="food.price"></dd>
														<dd  class="order-listdetailed">{{ food.price*food.quantity}}</dd> -->
													</div>
												</dl>
											</div>
											<div class="order-listbottomright">
												<span class="order-ml">
													￥<em class="mui-h4">{{item.totalPrice}}</em>
												</span>

												<span>
													共
													<i>{{item.totalCount}}</i>
													件商品
												</span>
												<p class="order-time">
													{{item.addTimeText}}<br />  
												</p>
												<span>订单号：{{item.orderId}}</span>
											</div>
											<div class="order-listbottombtn" v-if="item.payStatus==0">
												<button type="button" class="mui-btn mui-btn-bdgray"    @click="pay(item)">结账</button>
												<button type="button" class="mui-btn mui-btn-bdgray"    @click="cancelOrder(item,this)">取消</button>
												<!-- <button type="button" class="mui-btn mui-btn-bdgray" v-if="item.ratingCount==0 && item.STATUS ==='CHECKEDOUT' " @click="comment(item)">吐槽</button>
												<button type="button" class="mui-btn mui-btn-bdgray" v-if="item.ratingCount>0" @click="jump(item)">查看吐槽</button> -->
											</div>
											<div class="order-listbottombtn" v-if="item.payStatus==1">
												<button type="button" class="mui-btn mui-btn-bdgray"    @click="cancelOrder(item,tihis)">删除</button>
												<!-- <button type="button" class="mui-btn mui-btn-bdgray" v-if="item.ratingCount==0 && item.STATUS ==='CHECKEDOUT' " @click="comment(item)">吐槽</button>
												<button type="button" class="mui-btn mui-btn-bdgray" v-if="item.ratingCount>0" @click="jump(item)">查看吐槽</button> -->
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="layer-comment" class="layer">
			<div class="mui-popup mui-popup-in">
				<div class="mui-popup-inner">
					<div class="mui-popup-text color-orange">客官，您对本店还满意吗？</div>
					<p>
						<textarea rows="2" class="layer-textarea" id="commentContent"  ></textarea>
					</p>
				</div>
				<div class="mui-popup-buttons">
					<span class="mui-popup-button mui-popup-button-bold" id="commentCancle">取消</span>
					<span class="mui-popup-button" id="commentSumint">确定</span>
				</div>
			</div>
		</div>

	</div>
	<script type='text/javascript' src='${path}/static/myjs/information/weixin/js/mui.pullToRefresh.js'></script>
	<script type='text/javascript' src='${path}/static/myjs/information/weixin/js/mui.pullToRefresh.material.js'></script>
	<script type="text/javascript">
	
		var me = this;
		me.payJson = {};
		me._global = {
			'BUSINESS_ID' : '${pd.BUSINESS_ID}',
			'OPENID' : '${pd.OPENID}',
			'CHANNEL' : '${pd.CHANNEL}',
			'RAMADHIN' : '${pd.RAMADHIN}',
			'page' : 1,
			'rows' : 10,
			'commentPage' : 1,
			'commentRows' : 10,
			'prepay_id' : '',
			'orderid' : ''
		};
		me.orderVue = new Vue({
			el : '#orderContent',
			data : {
				orderList : []
			},
			created : function() {
				var my = this;
				$.get(rootpath + '/jhh/getOrderList.ndo', {
					'page' : _global.page,
					'rows' : _global.rows,
					"time" : Date()
				}, function(result) {
					my.orderList = result.rows;
					me.totalPage = result.total;
					me.tempTotalPage++;
				}, 'json');

			},
			methods : {
				call : function(msg) {
				},
				cancelOrder : function(item, obj) {
					mui.confirm('确认取消当前订单吗？', '提示', [ '确认', '取消' ], function(e) {
						//确认
						if (e.index == 0) {
							mui.ajax(rootpath +  '/jhh/deleteOrder.ndo', {
								data : {
									orderId : item.orderId
								},
								dataType : 'json',
								type : 'post',
								timeout : 10000,
								success : function(data) {
									if (data.msg == "成功") {
											location.reload();
									}else{
										mui.toast(data.msg);
									}
								}
							});
						}
					});
					 
				},
				jump : function() {
					window.location.href = 'toCommentList?CHANNEL='+me._global.CHANNEL+'&OPENID=' + me._global.OPENID + '&BUSINESS_ID=' + me._global.BUSINESS_ID+"&RAMADHIN="+ me._global.RAMADHIN;
				},
				comment : function(item) {
					$('#layer-comment').show();
					$("#commentSumint").bind("click",function(){
						var contentVal = $('#commentContent').val();
						
						if (contentVal.length == 0) {
							mui.toast('内容不能为空',{ duration:'long', type:'div' });
						} else {
							item.ratingCount = 1;
							$("#layer-comment").fadeOut();
							$("#commentSumint").unbind("click");
							mui.ajax(rootpath + '/weixinOrder/comment.ndo', {
								data : {
									BUSINESS_ID : item.BUSINESS_ID,
									OPENID : me._global.OPENID,
									ORDER_ID : item.id,
									RATING_TEXT : $('#commentContent').val()
								},
								dataType : 'json',
								type : 'post',
								timeout : 10000,
								success : function(data) {
									if (data.status = '0000') {
										$('#commentContent').val('')
										mui.toast('提交成功');
									}
								}
							});
						}
					});
					 
				},
				pay : function(item) {
					
					mui.ajax(rootpath + '/jhh/payOrder.ndo', {
						data : {
							orderId : item.orderId
						},
						dataType : 'json',
						type : 'get',
						timeout : 10000,
						success : function(data) {
							if (data.code ==1) {
								mui.toast(data.msg);
							}else{
								if(data.channel=="wx"){
									 mui.ajax(rootpath + '/m/home/getWXPayJson.ndo', {
											data : {
												ORDER_ID :   item.id,
												OPENID :  me._global.OPENID,
												BUSINESS_ID: me._global.BUSINESS_ID
											},
											dataType : 'json',
											type : 'post',
											timeout : 10000,
											success : function(data) {
												if (data.status = '0000') {
													me._global.orderid = item.id; 
													me.payJson=JSON.parse(data.dataset.payJson);
													callpay();
												}
											}
										});
								}else{
									var params = [ {
										name : 'ORDER_ID',
										value : item.id
									}, {
										name : 'CHANNEL',
										value : me._global.CHANNEL
									}, {
										name : 'OPENID',
										value : me._global.OPENID 
									}, {
										name : 'TYPE',
										value : 'PAY_MODE_ALI_PAY'
									} ];
									eachInstall(rootpath + '/m/home/payApi', params, null, 'post');
								}
							}
								 
								}  
							}
						}
					});
				}
			}
		});

		(function($, $$) {
			me.tempTotalPage = 0;
			me.commentTempTotalPage = 0;
			$.ajaxSettings.async = true;

			me.commentVue = new Vue({
				el : '#item2mobile',
				data : {
					commentList : []
				},
				created : function() {

				},
				filters : {
					imgUrl : function(value) {
						if (!value)
							return '';
						value = rootpath + "/appFileDownload.ndo?id=" + value;
						return value;
					}
				}
			});

			$('.mui-scroll-wrapper').scroll({
				indicators : false
			//是否显示滚动条
			});

			$.get(rootpath + '/weixinOrder/getCommentList.ndo', {
				OPENID : _global.OPENID,
				'page' : _global.commentPage,
				'rows' : _global.commentRows
			}, function(result) {
				commentList = result.dataset_line;
				me.commentTotalPage = result.dataset.totalPage;
				me.commentTempTotalPage++;
			}, 'json');
		})(mui, jQuery);

		mui.init({
			pullRefresh : {
				container : '#pullrefresh',
				up : {
					contentrefresh : '正在加载...',
					callback : pullupRefresh
				}
			}
		});

		$("#commentCancle").click(function() {
			$("#layer-comment").fadeOut();
		});
		
		/**
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			var refreshFlag = (++me.tempTotalPage >= me.totalPage);
			mui('#pullrefresh').pullRefresh().endPullupToRefresh(refreshFlag); //参数为true代表没有更多数据了
			if (!refreshFlag) {
				$.get(rootpath + '/weixinOrder/getOrderList.ndo', {
					OPENID : me._global.OPENID,
					'page' : me.tempTotalPage,
					'rows' : me._global.rows
				}, function(result) {
					for (i in result.dataset_line) {
						me.orderVue.orderList.push(result.dataset_line[i]);
					}
				}, 'json');
			}
		}

		//吐槽刷新
		mui('#scroll2').pullToRefresh({
			up : {
				contentrefresh : '正在加载...',
				contentnomore : '没有更多数据了', //上拉无更多信息时提示信息
				callback : function() {
					var self = this;
					var refreshFlag = (++me.commentTempTotalPage > me.commentTotalPage);
					self.endPullUpToRefresh(refreshFlag); //参数为true代表没有更多数据了
					if (!refreshFlag) {
						$.get(rootpath + '/weixinOrder/getCommentList.ndo', {
							OPENID : me._global.OPENID,
							'page' : me.commentTempTotalPage,
							'rows' : me._global.commentRows
						}, function(result) {
							for (i in result.dataset_line) {
								me.commentVue.commentList.push(result.dataset_line[i]);
							}
						}, 'json');
					}

				}
			},
			down : {

			}
		});

		function jsApiCall() {
			WeixinJSBridge.invoke('getBrandWCPayRequest', me.payJson, function(res) {
				//  WeixinJSBridge.log(res.err_msg);
				var url = "";
				if (res.err_msg == "get_brand_wcpay_request:ok") {
					url = basePath + "weixinHome/payResult?orderId=" + me._global.orderid + "&action=success&prepay_id=" + me._global.prepay_id+"&OPENID="+ _global.OPENID;
				} else {
					url = basePath + "weixinHome/payResult?orderId=" + me._global.orderid + "&action=fail&prepay_id=" + me._global.prepay_id+"&OPENID="+ _global.OPENID;
				}
				window.location.href = url;
			});
		}

		function callpay() {
			if (typeof WeixinJSBridge == "undefined") {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', jsApiCall);
					document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
				}
			} else {
				jsApiCall();
			}
		}
	</script>
</body>
</html>